<template>
  <div class="item-music">
    <MusicTop :playList="playlist"></MusicTop>
    <MusicBody
      :itemList="itemList"
      :subscribedCount="playlist.subscribedCount"
    ></MusicBody>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { $http } from '@/utils/Axios.js'
import MusicTop from '@/components/item/ItemMusicTop.vue'
import MusicBody from '@/components/item/ItemMusicBody.vue'
export default {
  name: 'ItemMusic',
  props: ['id'],
  setup(props) {
    const songDetails = reactive({
      playlist: {},
      itemList: []
    })

    const getItemMusic = async () => {
      // 获取歌单详情页数据
      const { data: res } = await $http.get('playlist/detail', {
        params: { id: props.id }
      })

      songDetails.playlist = res.playlist
    }
    const getMusicTrack = async () => {
      // 获取歌单所有歌曲
      const { data: res } = await $http.get('playlist/track/all', {
        params: { id: props.id, limit: 10 }
      })

      songDetails.itemList = res.songs
    }
    getItemMusic()
    getMusicTrack()
    return {
      ...toRefs(songDetails),
      getItemMusic,
      getMusicTrack
    }
  },
  components: { MusicTop, MusicBody }
}
</script>

<style lang="less" scoped>
.item-music {
  position: relative;
}
</style>
